<template>
    <div class="tags">
      <el-tag @close="handleCloseTag(tag,index)" :closable="tag.name !== 'home'" @click="changeMenu(tag)" v-for="(tag,index) in tags" :key="index" :effect="$route.name==tag.name ? 'dark':'plain' " >{{tag.label}}</el-tag>
    </div>
</template>

<script setup>
// 引入仓库
import { computed } from "vue";
import { useAside } from "../store/index.js";
const main =useAside()

// 引入路由
import {useRouter,useRoute} from 'vue-router'
const router= useRouter()
const route=useRoute()


const tags = main.tabList
// 点击切换页面
const changeMenu= (item)=>{
    router.push({name:item.name})
    main.selectMenu(item)
}
// 删除tag标签
const handleClose=(val)=>{
    main.closeTag(val)
}

const handleCloseTag =(tag,index)=>{
    // 获取索引
    const length = tags.length -1
   // 删除tag标签
   handleClose(tag)
   if(tag.name !==  route.name){
      return
   }
   if(index === length ){
     router.push({
        name: tags[index-1].name
     })
   }else{
    router.push({
        name:tags[index].name
    })
   }


}



</script>

<style lang="less" scoped>
.tags{
    margin-bottom: 15px;
    .el-tag{
        margin-right: 10px;
        cursor: pointer;
    }
}


</style>